<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 1200px;
            margin: 0 auto;
        }

        .wrap h2 {
            text-align: center;

        }

        .wrap main {
            display: flex;
            justify-content: space-between;
            border: 1px solid #cfcfcf;
            padding: 0 10px;
            height: 500px;
            margin-top: 20px;
        }

        .wrap main aside {
            width: 120px;
            border-right: 1px solid #cfcfcf;
        }

        .wrap main aside > p, aside span {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            cursor: pointer;
            display: block;
        }

        .wrap main section {
            flex: 1;
        }

        .content-list {
            list-style-type: none;

        }

        .content-list header.hidden {
            display: none;
        }

        .content-list header {
            font-size: 16px;
        }

        .content-list footer {
            display: flex;
            justify-content: space-between;
        }

        .content-list footer
    </style>
</head>
<body>
<div class="wrap">
    <h2>管理后台</h2>
    <main>
        <aside>
            <p>留言审核</p>
            <span>说说列表</span>
            <span>博客列表</span>
        </aside>
        <section>
            <ul>
                <li class="content-list">
                    <header class="">标题</header>
                    <footer>
                        <p>撒的发生大</p>
                        <div>
                            <button>删除</button>
                            <button>通过</button>
                        </div>
                    </footer>
                </li>
            </ul>
        </section>
    </main>

</div>
<script>
    function initRequestList() {
        const xhr = new XMLHttpRequest;
        xhr.open('GET', '/static/open/adminBlogList', true);
        xhr.setRequestHeader('authorization', 'Bearer ' + localStorage.getItem('token'))
        xhr.onload = function () {
            const { status,data } = JSON.parse(xhr.responseText)
            console.log( data );

            if ( !status) {
               renderHtml( data )
            }
        }
        xhr.send()
    }

    initRequestList()

    function renderHtml(dataList) {
        if (dataList.length) {
            let html = '';
            for (let i = 0; i < dataList.length; i++) {
                if ( !dataList[i].state) {
                    html += `<li class="content-list">`
                    if ( dataList[i].blog_title) {
                        html += `<header class="">${dataList[i].blog_title}</header>`
                    } else {
                        html += `<header class="hidden">标题</header>`
                    }
                    html += `<footer>`
                    if ( dataList[i].blog_content ) {
                        html += `<p>${dataList[i].blog_content}</p>`
                    } else {
                        html += `<p>${dataList[i].speak_content}</p>`
                    }
                    html += `<div onclick="btnHandle(event)">`
                    html += `<button class="remove" data-id="${dataList[i].id}">删除</button>`
                    html += `<button class="ok" data-id="${dataList[i].id}">通过</button>`
                    html += `</div>`
                    html += `</footer>`
                    html += `</li>`
                }
            }
            document.querySelector('section ul').innerHTML = html;
        }
    }
    function btnHandle( { target } ) {
        console.log(target.tagName)
        if ( target.tagName === 'BUTTON' && target.classList.contains('remove')) {
            // 移除
            const xhr = new XMLHttpRequest;
            xhr.open('POST', 'open/api/blog/remove', true);
            xhr.setRequestHeader('content-type','application/json')
            xhr.setRequestHeader('authorization', 'Bearer ' + localStorage.getItem('token'))
            xhr.onload = function () {
                const { status, data } = JSON.parse(xhr.responseText);
                console.log(data)
            }
            xhr.send(JSON.stringify({
                id: target.dataset['id'],
                state: 2
            }))
        } else if ( target.tagName === 'BUTTON' && target.classList.contains('ok')) {
            // 通过
            const xhr = new XMLHttpRequest;
            xhr.open('POST', 'open/api/blog/adopt',true);
            xhr.setRequestHeader('content-type', 'application/json')
            xhr.setRequestHeader('authorization', 'Bearer '+ localStorage.getItem('token'))
            xhr.onload = function () {
                const { status, data } = JSON.parse(xhr.responseText)
            }
            xhr.send(JSON.stringify({
                id: target.dataset['id'],
                state: 1
            }))
        }
    }
</script>
</body>
</html>